<template>
	<view class="f-1 f-col bf h100v">
		<view class="category-c f-row">
			<!-- 左边导航 -->
			<scroll-view scroll-y class="left-c" scroll-with-animation="true" :scroll-into-view="lsiv">
				<view class="title-c" :id="'l'+i" :class="{'onSelected':sIndex == i}" v-for="(v,i) in categoryList"
					:key="i" @click="choose(i)">
					<view class="title-n f-c-xc" :class="{'ysyj':i==sIndex+1,'yxyj':i==sIndex-1}">
						<block>
							<view class="f-x-c">
								<text class="t-o-e2">{{v.name}}</text>
							</view>
						</block>
					</view>
				</view>
				<view class="title-c">
					<view class="title-n"></view>
				</view>
				<view class="title-c">
					<view class="title-n"></view>
				</view>
				<view class="title-c">
					<view class="title-n"></view>
				</view>
			</scroll-view>
			<!-- 右侧商品 -->
			<scroll-view lower-threshold='100' scroll-y class="f-g-1 right-c" :scroll-top="scrollTop"
				:scroll-into-view="rsiv" @scroll="myscroll">
				<!-- <block v-for="(pv,pi) in categoryList" :key="pv.id"> -->
				<!-- <view class="c-item" :id="'r'+pi"> -->
				<!-- <view class="c-title">{{pv.name}}</view> -->
				<view @click='goodinfo(co.id)' v-for="(co,i) in categoryList[sIndex].goods" :key="co.id"
					class='conw2 f-row p2'>
					<view class="f-g-0 bf6 left bs5 p-r ma">
						<mg-img cname='wh' :src='co.icon' />
						<view v-if='co.stock<=0' class="p-a ysq f-c b0 cf w100 f22">已售罄</view>
					</view>
					<view class="f-g-1 ml20 f24 c9">
						<view class="f30 t-o-e2 c0 wei">{{co.name}}</view>
						<view class="mt10 f-raw f26">
							<text class="mr30">库存{{co.stock}}</text>
						</view>

						<!-- 	<view v-if="1" class="mt10 f-row">
											<view class="vipl f-y-c">{{sl+co.vipPrice}}</view>
											<view class="vipr f-y-c">VIP</view>
										</view> -->
						<view class='f-x-bt mt10'>
							<view class='f-g-1 t-o-e f30' :style="{color:gstyle.priceColor}">
								<text>{{sl}}</text>{{co.price}}
							</view>
							<view v-if="(co.isSpecs==1||co.isMaterial==1||co.isAttr==1)"
								@click.stop="add({addwz:1,g:co})" class="f-g-0 cartggc f-c">
								<view class='text-btnf f24 f-c ggc' :style="{background:tColor,color:gstyle.addColor}">
									<text>选 择</text>
									<text v-if='co.num>0' class="dot f-c"
										:style="{background:'#FB4E44'}">{{co.num}}</text>
								</view>
							</view>
							<view v-else class="f-g-0 f-bt">
								<view v-if="co.num>0" class="reducecon active f-y-c">
									<view @click.stop="dec({addwz:1,g:co})" class="cartc f-c">
										<button class="cartdec f-c" :style="{borderColor:tColor}">
											<u-icon name="minus" size="26" :color="gstyle.delColor()"></u-icon>
										</button>
									</view>
									<text class="f30 ma c0">{{co.num}}</text>
								</view>
								<view @click.stop="add({addwz:1,g:co})" class="cartc f-c">
									<button class="cartadd f-c" :style="{background:ztqs}">
										<u-icon name="plus" size="26" :color="gstyle.addColor"></u-icon>
									</button>
								</view>
							</view>
						</view>
						<view v-if="co.maxNum>0||co.minNum>1" :style="{color:gstyle.priceColor}">
							<text v-if="co.minNum>1" class="mr20">{{co.minNum}}份起售</text>
							<text v-if="co.maxNum>0" class="">限{{co.maxNum}}份</text>
						</view>
					</view>
				</view>
				<!-- </view> -->
				<!-- </block> -->
				<view class="conw2mb"></view>
			</scroll-view>
		</view>
		<!-- :outin='outin' 会员价格 -->
		<spec @add='add' :co='goodsInfo' v-model="showGg"></spec>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations,
		mapActions
	} from 'vuex'
	import utils from '@/common/utils.js'
	import spec from './spec.vue'
	import {
		utilMixins
	} from "@/common/util-mixins.js"
	export default {
		components: {
			spec
		},
		props: {
			categoryList: {
				type: Array,
				default: function() {
					return []
				}
			},
			tableId: {
				type: [String, Number],
				default: function() {
					return 0
				}
			}
		},
		data() {
			return {
				scrollTop: 0,
				oldScrollTop: 0,
				gstyle: {
					priceColor: '#f75353',
					addColor: '#ffffff',
					delColor: () => this.tColor
				},
				goodsInfo: {},
				showGg: false,
				rsiv: '', //右侧滑值
				lsiv: '', //左侧滑值
				sIndex: 0
			}
		},
		computed: {
			ztqs() {
				return `linear-gradient(90deg, rgba(${this.cTR(this.tColor)},0.70),${this.tColor})`
			}
		},
		watch: {
			categoryList() {
				this.$nextTick(() => {
					setTimeout(() => {
						this.getHeightList();
					}, 100)
				})
			}
		},
		mixins: [utilMixins],
		methods: {
			async dec(e) {
				this.$emit('dec', e)
			},
			async add(e) {
				this.$emit('add', e)
			},
			choose(index) {
				if (this.sIndex == index) return
				this.sIndex = index;
				// this.lsiv = `l${index-3}`
				// this.rsiv = `r${index}`
				// 点击选择分类时 禁止触发scroll-view的滚动事件
				this.chooseFlag = true
				this.scrollTop = this.oldScrollTop
				this.$nextTick(() => {
					this.scrollTop = 0
				});
			},
			//获取每个分类的位置信息 用于判断scroll当前位置属于那个分类
			getHeightList() {
				let selectorQuery = uni.createSelectorQuery().in(this);
				selectorQuery.selectAll('.c-item').boundingClientRect((rects) => {
					// console.log('rects',rects)
					let arr = [],
						h = 0
					rects.forEach(v => {
						h += v.height
						arr.push(h)
					})
					this.right_height = arr;
					this.jsgdwb = true
				}).exec();
			},
			myscroll(e) {
				this.oldScrollTop = e.detail.scrollTop
			},
			// myscroll:utils.throttle(function(e) {
			// 	// console.log('myscroll', e)
			// 	if(this.chooseFlag){
			// 		this.chooseFlag = false
			// 		return
			// 	}
			// 	let scroll_top = e[0].detail.scrollTop;
			// 	//判断当前的scrollTop在哪个商品分类的区间内;
			// 	for (let i = 0; i < this.right_height.length; i++) {
			// 		if (scroll_top < this.right_height[0]) {
			// 			this.sIndex = 0
			// 			break
			// 		} else if (scroll_top >= this.right_height[i - 1] && scroll_top < this.right_height[i]) {
			// 			this.sIndex = i
			// 			this.lsiv = `l${i-3}`
			// 			this.rsiv = '' //这里不设置空导致siv不触发
			// 			break
			// 		}
			// 	}
			// })
		}
	}
</script>

<style scoped lang="scss">
	.category {
		position: relative;

		.mtimg {
			height: 225rpx;
		}

		.sgmain {
			/* #ifdef H5 */
			padding-top: 120rpx;
			/* #endif */
			/* #ifndef H5 */
			padding-top: 190rpx;
			/* #endif */
		}
	}

	.header {
		height: 178rpx;
		z-index: 9;

		&-bd {
			height: 178rpx;
		}

		.myicon {
			width: 70rpx;
			height: 70rpx;
		}

		.sjimg {
			width: 90rpx;
			height: 90rpx;
		}

		.buytype {
			height: 62rpx;
			padding: 0 6rpx;
			border-radius: 45rpx;
			border: 0.5Px solid #ddd;
			background: #f6f6f6;

			.type {
				min-width: 86rpx;
				padding: 0 10rpx;
				height: 50rpx;
			}

			.atype {
				color: #fff;
				background: #000;
			}
		}
	}

	.header2 {
		padding: 0rpx;
		border-radius: 30rpx 30rpx 0 0;

		.hrbd {
			// margin-top: -5rpx;
		}

		.logoimg {
			margin: -36rpx 10rpx 0 0;
			width: 120rpx;
			height: 120rpx;
		}

		.sc {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.bodyer {
		padding: 0 25rpx;
	}

	.pt150 {
		padding-top: 240rpx;
	}

	.category-fix {
		position: absolute;
		left: 0;
		top: 0;
		z-index: 9;
	}

	// height: 100%;
	.category-c {
		width: 100%;
		height: 100%;

		.left-c {
			width: 168rpx;
			flex: 0 0 168rpx;
			// padding-bottom: 0rpx;
			background-color: #F6F6F6;

			.title-c {
				position: relative;
				height: 140rpx;
				color: #999;
				font-size: 26rpx;
				background: #fff;

				.title-n {
					// width: 80%;
					margin: auto;
					height: 100%;
					padding-left: 10rpx;
					background: #F6F6F6;
					overflow: hidden;

					.title-img {
						width: 40rpx;
						height: 40rpx;
						margin-right: 10rpx;
					}
				}

				.title-b {
					position: absolute;
					left: 0;
					top: 0;
					width: 7rpx;
					height: 100%;
					background: #fff;
				}

				.title-bx {
					position: absolute;
					right: 0;
					top: 8rpx;
					background: #FFEFEA;
					padding: 3rpx 10rpx;
					border-radius: 15rpx 0 0 15rpx;
				}

				&.onSelected {
					.title-n {
						background: #fff;
					}

					color: #333;
					font-weight: bold;
				}
			}

			.ysyj {
				border-top-right-radius: 14rpx;
			}

			.yxyj {
				border-bottom-right-radius: 14rpx;
			}
		}

		.right-c {
			background: #fff;
			// padding-bottom: 0rpx;

			.c-item {
				.c-title {
					font-size: 24rpx;
					color: #777;
					padding: 20rpx 30rpx 0 20rpx;
				}
			}

			.conw2mb {
				padding-bottom: 420rpx;
			}
		}
	}

	.conw2 {
		padding: 20rpx;

		.left {
			width: 140rpx;
			height: 140rpx;
			background: #F6F6F6;
			border-radius: 12rpx;
		}

		.ppbq {
			background: #FFE054;
			top: 0rpx;
			left: -1rpx;
			padding: 0rpx 8rpx 2rpx;
			border-radius: 10rpx 0 10rpx 10rpx;

			&::after {
				content: '';
				width: 0;
				height: 0;
				border-bottom: 9rpx solid #948233;
				border-right: 9rpx solid transparent;
				position: absolute;
				right: -8rpx;
				top: 0;
			}
		}

		.ysq {
			height: 42rpx;
			background: rgba(0, 0, 0, 0.5)
		}
	}

	.ggc {
		position: relative;
		border-radius: 10rpx;
		font-weight: bold;
		height: 46rpx;
		width: 116rpx;
		margin-right: 10rpx;
		border: none;
	}

	.dot {
		position: absolute;
		width: 36rpx;
		height: 36rpx;
		right: -10rpx;
		top: -18rpx;
		border-radius: 50%;
		color: #fff;
		// border: 1rpx solid #fff;
	}

	.mr5 {
		margin-right: 5rpx;
	}

	.gyhqc {
		background: #FE624B;
		height: 48rpx;
		border-radius: 6rpx;
		overflow: hidden;

		.gyhql {
			padding: 6rpx 16rpx;
		}

		.gyhqr {
			padding: 0 16rpx;
			min-width: 56rpx;
			border-left: 1px dashed #fff;
		}

		.gdot {
			width: 8rpx;
			height: 8rpx;
			border-radius: 50%;
			background: #fff;
			right: -4rpx;
		}

		.gdot1 {
			top: -4rpx;
		}

		.gdot2 {
			bottom: -4rpx;
		}
	}

	.gyhqc2 {
		background: linear-gradient(90deg, #FF7D64, #FE624B);

		.gyhqb1 {
			width: 48rpx;
			background: #FFDCAF;
			border-bottom-right-radius: 24rpx;
		}
	}

	.gyhqc3 {
		color: #532600;
		// background: linear-gradient(90deg, #FFE19C, #FFC467);
		background:#FE9367;

		.gyhqb1 {
			// background: linear-gradient(135deg, #FADCA0, #FFB13A);
			background:#FE9367;
		}

		.gyhqr {
			// border-left: 1px dashed #DBAF6A;
			border-left: 1px dashed #FE9367;
		}
	}

	.mjc {
		height: 40rpx;
	}
</style>
